<template>
  <div class="card">
    <div class="state-box success" v-if="indentData.stState === 4">
      已经确认
    </div>
    <div class="state-box error" v-if="indentData.stState === 2">用户取消</div>
    <div class="state-box end" v-if="indentData.stState === 3">
      管理人员取消
    </div>
    <div class="state-box end" v-if="indentData.stState === 1">待确认</div>
    <div class="top flex-row">
      <img src="@/assets/images/model.png" class="proimg" alt="" />
      <div class="pre flex-colum">
        <div class="text" v-if="false">
          <div class="text-ellipsis">项目名：{{ indentData.proName }}</div>
        </div>
        <div class="text-ellipsis-2" style="margin-top: 10px">
          预约人数：{{ indentData.enrollNum }}
        </div>
        <div class="text-ellipsis-2" style="margin-top: 10px">
          单位：{{ indentData.yyCompany }}
        </div>
        <div class="text-ellipsis-2" style="margin-top: 10px">
          提交时间：{{ indentData.regTime }}
        </div>
      </div>
    </div>
    <div class="xian"></div>
    <div class="bottom flex-row">
      <div class="flex-row timebox">
        <van-icon name="underway-o" size="16px" color="#1989fa" />
        <!-- <img src="@/assets/images/time.png" class="timeimg" alt="" /> -->
        <div class="flex-row time" style="margin-left: 5px">
          <i class="timedata">预约时间：</i>
          <i class="timedata">{{ indentData.yearMoney }}</i>
        </div>
      </div>
      <div class="flex-row pre-c" v-if="false" @click="quxiao()">
        <p>取消预约</p>
      </div>
      <!-- <div class="flex-row pre-c" v-if="indentData.state !== 0" @click="faqi()">
        <p>重新发起预约</p>
      </div> -->
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { Dialog } from "vant";
import { delYySeeTime } from "@/api/user";
export default {
  data() {
    return {};
  },
  props: {
    indentData: {
      type: Object,
      default: () => ({}), // 默认启用一个空对象
    },
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  components: {},
  mounted() {},
  methods: {
    quxiao() {
      Dialog.confirm({
        title: "温馨提示",
        message: "是否确认取消预约？",
        confirmButtonColor: "#0065ff",
      })
        .then(() => {
          // on confirm
          var reqData = {
            seeTimeId: this.indentData.seeTimeId,
            stRemarks: "取消",
          };
          this.$loadingU.show("Please wait...", 10000);
          delYySeeTime(reqData).then((res) => {
            this.$toast({
              message: res.data.message,
            });
            this.$loadingU.hide();
            if (res.data.state === 0) {
              this.$emit("upList");
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    faqi() {
      Dialog.confirm({
        title: "温馨提示",
        message: "重新发起预约？",
        confirmButtonColor: "#0065ff",
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style scoped lang="less">
.card {
  width: 327px;
  background: #ffffff;
  border-radius: 12px 12px 12px 12px;
  border: 1px solid #f2f4f5;
  position: relative;
  .state-box {
    position: absolute;
    right: 30px;
    border-radius: 10px;
    top: -10px;
    padding: 2px 12px;
    box-sizing: border-box;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    color: #ffffff;
    line-height: 18px;
  }
  .success {
    background-color: #0ce07a;
  }
  .error {
    background-color: #f33060;
  }
  .end {
    background-color: #909399;
  }
  .top {
    align-items: center;
    padding: 16px 16px 0;
    box-sizing: border-box;
  }
  .xian {
    width: 327px;
    height: 1px;
    margin-top: 10px;
    background: #f2f4f5;
    border-radius: 0px 0px 0px 0px;
  }
}
.proimg {
  width: 72px;
  height: 72px;
  border-radius: 12px 12px 12px 12px;
}

.pre {
  width: 80%;
  margin-left: 20px;
}
.pre div:nth-child(1) {
  font-weight: 600;
  font-size: 14px;
  color: #112950;
}

.pre div:nth-child(2) {
  font-weight: 400;
  font-size: 12px;
  color: #8e9aab;
  line-height: 18px;
}
.pre div:nth-child(3) {
  font-weight: 400;
  font-size: 12px;
  color: #8e9aab;
  line-height: 18px;
}
.pre div:nth-child(4) {
  font-weight: 400;
  font-size: 12px;
  color: #8e9aab;
  line-height: 18px;
}
.bottom {
  padding: 16px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  .timebox {
    align-items: center;
    .timeimg {
      width: 16px;
      height: 16px;
    }
    .time {
      font-weight: 600;
      font-size: 12px;
      color: #b2bac6;
      .timedata {
        color: #5e6f88 !important;
      }
    }
  }
  .pre-c {
    align-items: center;
    font-weight: 600;
    font-size: 12px;
    color: #0065ff;
    line-height: 18px;
  }
}
.text-data {
  color: #1989fa;
}
</style>
